<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>MVVM模型</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 
				MVVM模型：
						1. M：模型(Model) ：对应data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel) ： Vue实例对象
				观察发现：
						1.new Vue()时候传入的data中的一组一组的key-value,在vm上都有。
						2.通过vm.xxx修改数据后，页面中用到xxx的地方会自动刷新
		 -->

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>你好，{{school}}</h2>
			<h2>学校坐落于：{{address}}</h2>
			<input type="text" v-model="school">
		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:'#root',
				data:{
					school:'尚硅谷',
					address:'宏福科技园'
				}
			})
			/* 
				观察发现：
						1.new Vue()时候传入的data中的一组一组的key-value,在vm上都有。
						2.通过vm.xxx修改数据后，页面中用到xxx的地方会自动刷新
			*/
			console.log('Vue实例对象:',vm)

			setTimeout(()=>{
				vm.address = '北七家镇'
			},2000)

		</script>
	</body>
</html>